<template>
  <div id="top">
      <div class="topboxx">
        <!--蓝色矩形-->
        <div class="topbox"></div>  
      </div>

        <div class="text5">
            <p>机构管理</p>
        </div>

        <div class="elform1">
            <el-form>
                <table>
                    <tr >
                        <td width="300px">
                            
                                <el-input v-model="input2"  placeholder="请输入关键字"></el-input>
                                <i class="el-icon-search qw1" @click="sousuoname"></i>
                            
                        </td>
                    </tr>
                </table>
           </el-form>
        </div>
        <div class="twobtn">
            <el-button type="primary" @click="addjigou">新增机构</el-button>
            <el-button type="primary" plain>导出</el-button>
        </div>
        

        <div class="mytable1">
            <center>
      <!-- 表格 :data="sea.slice((currentPage - 1) * pageSize, currentPage * pageSize)"-->
      <el-table :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width:1040px">
            <el-table-column
              type="selection"
              :id="list.appointId"
              v-model="list.appointId"
              align="center" 
            >
            </el-table-column>
            <el-table-column prop="organization_id"   label="编号"  width="50px"  align="center" 
            ></el-table-column>
            <el-table-column prop="organization_img"   label="机构图片" width="90px" align="center" >
                <template v-slot="scope">
                    <img :src="scope.row.organization_img" width="70" height="70">
                </template>
            </el-table-column>
            <el-table-column prop="organization_name" label="机构名称" align="center" >
            </el-table-column>
            <el-table-column prop="organization_principal" align="center"  label="负责人姓名" :formatter="intorganization">
            </el-table-column>
            <el-table-column prop="organization_iphone" align="center"  label="电话" width="120px"  >
            </el-table-column>
            <el-table-column prop="organization_area" label="机构地址" align="center" >
            </el-table-column>
            <el-table-column label="状态" align="center" >

                     
          <!-- <template v-slot="scoped"> -->

                 
            <el-switch v-model="flag" active-color="#13ce66"></el-switch>
          <!-- </template> -->

            </el-table-column>
            <el-table-column  label="操作" align="center" >
            <!-- <router-link to="/datas06" class="bianji">编辑</router-link> -->
            <template slot-scope="scope">
              <el-button
                @click="handleClickedit(scope.row)"
                type="text"
                size="small"
                style="font-size:13px;"
                >编辑</el-button
              >
              <el-button
                type="text"
                 class="ared"
                size="small"
                style="font-size:13px;"
                 @click="handleClickeditdel(scope.row)"
                >删除</el-button
              >
            </template>
            </el-table-column>
         
      </el-table>
      </center>

 <!-- 分页-->
      <center>
        <!-- 分页器 -->
          <div class="block" style="margin-top: 15px">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.length"
            >
            </el-pagination>
          </div>
      </center>

        </div>

  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL="http://localhost:8080"
export default {
  data () {
      return {
          input2:"",
          list:[],
          abc: true,
          currentPage: 1, // 当前页码
          pageSize: 3, // 每页的数据条数
          flag:true
      }
  },
  created () {
      this.queryjigoulist();
      document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
  },
  methods: {
      //条查
      sousuoname(){
           axios({
            url: "/data/getOrganizationList",
            method: "GET",
            params:{
                organization_name:this.input2
            }
        }).then((res) => {
            this.list = res.data; //把值传到list里面
            console.log(res);
        });
      },
      //查询
      queryjigoulist(){
          axios({
            url: "/data/getOrganizationList",
            method: "GET",
        }).then((res) => {
            this.list = res.data; //把值传到list里面
            console.log(res);
        });
      },
      //负责人姓名
     intorganization(row, column, cellValue, index) {
         if (cellValue ===1){
             return 'A团队';
         }else if (cellValue ===2){
             return 'B团队';
         }else if (cellValue ===3) {
             return 'C团队';
         }
     },
      
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        //   alert(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      //编辑跳页面
    handleClickedit(row) {
      this.$router.push({
        path:'/datas06',
        query: {
          id: row.organization_id,
        },
      });
    },
    //新增
    addjigou(){
      this.$router.push({
        path:'/datas08',
      })
    },
     handleClickeditdel(row) {
      axios({
                url: "/data/delOrganjigou",
                method: "POST",
                params:{
                    organization_id:row.organization_id
                }
            }).then((res) => {
                // this.list = res.data; //把值传到list里面
                // console.log(this.list);
                
                this.$message.success('删除成功')
                this.queryjigoulist();
            })
    },
  }
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
}
#top{
    width: 1150px;
    height: 750px;
     background: white;
    margin: 20px auto;
    position: relative;
}
.topbox{
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.topboxx{
    border-width: 0px;
    position: absolute;
    left: 40px;
    top: 42px;
    width: 6px;
    height: 20px;
}
.text5{
    position: absolute;
    left: 55px;
    top: 43px;
    font-size: 18px;
}
.elform1{
    position: absolute;
    top: 100px;
    left: 40px;
}
.twobtn{
    position: absolute;
    top: 110px;
    left: 900px;

}
.mytable1{
    position: absolute;
    top: 200px;
    left: 40px;
}
.ared{
    color: red;
}
.qw1{
    position: absolute;
    top: 15px;
    left: 280px;
}
.bianji{
    color: blue;
}
</style>